<template>
  <div class="_wz_video">
    <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" muted ref="videoPlayer">

    </video>
  </div>
</template>
<script>
  import Vue from 'vue'


  export default {
    props: [
      "materialData",//课件所有数据
      "old",//判断使用新的播放  还是mp4播放
    ],//接收来自父组件的数据
    data() {
      return {
        player: null,
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      this.initVideo();
    },
    methods: {//执行的方法
      initVideo() {
        let that = this;
        that.player = that.$video('videojs-flvjs-player', {
          autoplay: false, // 自动播放
          controls: true, //是否显示底部控制栏
          width: "100%", //
          height: "100%", //
          //		aspectRatio: "16:9", //视频比例
          loop: false, //是否循环播放
          muted: false, //设置默认播放音频
          /*
               *	auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
               *	metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
               *	none:
               */
          preload: "none", //
          poster: "/static/img/videos.png", //开始播放前显示的图像的URL
          fluid: false, // 是否自适应布局
          language: 'zh-CN', //中文
          controlBar: {
            children: {
              PlayToggle: true, //播放 暂停
              muteToggle: true, //声音
              VolumeControl: true, //声音
              ProgressControl: true, //进度控制
              RemainingTimeDisplay: true, //重排时间显示
            }
          },
          techOrder: ['html5'],
//        flvjs: {
//          mediaDataSource: {
//            isLive: false,
//            cors: true,
//            withCredentials: false,
//          },
//        },
          sources: [{
            src: (!!that.old) ? that.apiUrl.videoUrl + that.materialData.mp4Url : that.apiUrl.videoUrl + that.materialData.videoSdUrl,
            type: (!!that.old) ? "video/mp4" : 'application/x-mpegURL'
          }],
//        sources: [{
//          src: "https://xdbj.net.cn/resource/FileStore/training_material/material_m3u8/第八课 车辆日常安全检查1080P/第八课 车辆日常安全检查.m3u8",
//          type: 'application/x-mpegURL'
//        }],
        }, function onPlayerReady() {
          if (that.old) {
            return;
          }
          //videoSdUrl  标清
          //videoHdUrl  高清
          //videoFdUrl  超清
          //materialData
          let html = '<div><button class="vjs-control" @click="videoSwitching(\'bz\')">标清</button>';
          if (!!that.materialData.videoHdUrl) {
            html += '<button class="vjs-control" @click="videoSwitching(\'gq\')">高清</button>';
          }
          if (!!that.materialData.videoFdUrl) {
            html += '<button class="vjs-control" @click="videoSwitching(\'cq\')">超清</button>';
          }
          html += '</div>';

          let MyComponent = Vue.extend({
//          template: '<div><button class="vjs-control" @click="videoSwitching(\'bz\')">标准</button>' +
//          '<button class="vjs-control" @click="videoSwitching(\'gq\')">高清</button>' +
//          '<button class="vjs-control" @click="videoSwitching(\'cq\')">超清</button></div>',
            template: html,
            methods: {
              videoSwitching(type) {
                let time = that.player.currentTime();
                if (type == "bz") {
                  //标准
                  that.player.src({
                    src: that.apiUrl.videoUrl + that.materialData.videoSdUrl,
                    type: "application/x-mpegURL"
                  });
                } else if (type == "gq") {
                  //高清
                  that.player.src({
                    src: that.apiUrl.videoUrl + that.materialData.videoHdUrl,
                    type: "application/x-mpegURL"
                  });

                } else if (type == "cq") {
                  //超清
                  that.player.src({
                    src: that.apiUrl.videoUrl + that.materialData.videoFdUrl,
                    type: "application/x-mpegURL"
                  });
                }
                setTimeout(function () {
                  that.player.currentTime(parseInt(time));
                  that.player.play();
                }, 100);
              },
            }
          });
          let component = new MyComponent().$mount();
          console.log(component)
          document.getElementsByClassName('vjs-control-bar')[0].appendChild(component.$el);

          //判断视频是否播放
          let oneTime = true;
          this.on('ended', function () {
            //结束播放
            oneTime = true;
          });
        });
      },

    },
    watch: {//监听

    },

    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态
    },
    destroyed() {//destroyed 销毁完成状态
      this.player.dispose()
    }
  }
</script>
<style>
  .vjs-poster {
    background-image: url("../../../assets/videos.png") !important;
  }
</style>
<style lang="less">

  ._wz_video {
    width: 100%;
    height: 100%;

    .video-js {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .video-js {
      /*transform: rotate(90deg);*/
    }

    #danmu {
      position: absolute;
      top: 0;
      bottom: 36px;
      left: 0;
      right: 0;
      z-index: 99;
      width: 100% !important;
      height: calc(100% - 36px) !important;
    }

    .vjs-big-play-centered .vjs-big-play-button {
      z-index: 101;
    }
  }

</style>
